<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			<view class="title">房源查询</view>
		</view>
		
		<!-- 筛选条件 -->
		<view class="filter-section">
			<view class="filter-title">筛选条件</view>
			
			<!-- 楼宇筛选 -->
			<view class="filter-item">
				<view class="filter-label">楼宇</view>
				<picker @change="onBuildingChange" :value="buildingIndex" :range="buildingNames">
					<view class="picker-value">{{ buildingNames[buildingIndex] || '全部' }}</view>
				</picker>
			</view>
			
			<!-- 楼层筛选 -->
			<view class="filter-item">
				<view class="filter-label">楼层</view>
				<picker @change="onFloorChange" :value="floorIndex" :range="floorNames">
					<view class="picker-value">{{ floorNames[floorIndex] || '全部' }}</view>
				</picker>
			</view>
			
			<!-- 单元类型筛选 -->
			<view class="filter-item">
				<view class="filter-label">类型</view>
				<picker @change="onUnitTypeChange" :value="unitTypeIndex" :range="unitTypes">
					<view class="picker-value">{{ unitTypes[unitTypeIndex] || '全部' }}</view>
				</picker>
			</view>
			
			<!-- 面积范围筛选 -->
			<view class="filter-item">
				<view class="filter-label">面积</view>
				<view class="range-input">
					<input type="digit" v-model="minArea" placeholder="最小" />
					<text>-</text>
					<input type="digit" v-model="maxArea" placeholder="最大" />
					<text>㎡</text>
				</view>
			</view>
			
			<!-- 价格范围筛选 -->
			<view class="filter-item">
				<view class="filter-label">价格</view>
				<view class="range-input">
					<input type="digit" v-model="minPrice" placeholder="最小" />
					<text>-</text>
					<input type="digit" v-model="maxPrice" placeholder="最大" />
					<text>元/㎡/月</text>
				</view>
			</view>
			
			<!-- 筛选按钮 -->
			<view class="filter-buttons">
				<button class="reset-btn" @click="resetFilters">重置</button>
				<button class="search-btn" @click="searchHousing">查询</button>
			</view>
		</view>
		
		<!-- 房源列表 -->
		<view class="housing-list">
			<view class="list-header">
				<text class="list-title">房源列表</text>
				<text class="list-count">共 {{ total }} 条结果</text>
			</view>
			
			<!-- 房源列表内容 -->
			<view v-if="housingList.length > 0" class="list-content">
				<view 
					class="housing-item" 
					v-for="(item, index) in housingList" 
					:key="index"
					@click="viewHousingDetail(item)"
				>
					<view class="housing-info">
						<view class="housing-title">{{ item.unit_number }}</view>
						<view class="housing-tags">
							<text class="tag">{{ item.unit_type }}</text>
							<text class="tag status-tag">{{ item.status }}</text>
						</view>
						<view class="housing-detail">
							<view class="detail-item">
								<text class="label">位置：</text>
								<text class="value">{{ item.building.name }}{{ item.floor ? ' ' + item.floor.actual_label : '' }}</text>
							</view>
							<view class="detail-item">
								<text class="label">面积：</text>
								<text class="value">{{ item.actual_area }} ㎡</text>
							</view>
							<view class="detail-item">
								<text class="label">租金：</text>
								<text class="value price">{{ item.rental_price }} 元/㎡/月</text>
							</view>
							<view class="detail-item">
								<text class="label">物业费：</text>
								<text class="value">{{ item.property_fee_standard }} 元/㎡/月</text>
							</view>
						</view>
					</view>
					<view class="housing-action">
						<button class="apply-btn" @click.stop="applyForRent(item)">申请租赁</button>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<image class="empty-image" src="/static/icons/empty.png"></image>
				<text class="empty-text">暂无符合条件的房源</text>
			</view>
			
			<!-- 加载更多 -->
			<view v-if="housingList.length > 0 && hasMoreData" class="load-more" @click="loadMore">
				<text>加载更多</text>
			</view>
			<view v-else-if="housingList.length > 0" class="no-more">
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// API基础URL
				baseURL: 'http://localhost:8000',
				
				// 筛选条件
				buildingOptions: [],
				buildingNames: ['全部'],
				buildingIndex: 0,
				
				floorOptions: [],
				floorNames: ['全部'],
				floorIndex: 0,
				
				unitTypes: ['全部'],
				unitTypeIndex: 0,
				
				minArea: '',
				maxArea: '',
				minPrice: '',
				maxPrice: '',
				
				// 分页
				page: 1,
				pageSize: 10,
				total: 0,
				hasMoreData: false,
				
				// 数据
				housingList: [],
				
				// 用户信息
				userInfo: null
			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo()
			
			// 加载筛选条件选项
			this.loadFilterOptions()
			
			// 加载房源列表
			this.searchHousing()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
				} else {
					// 未登录跳转到登录页
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			},
			
			// 加载筛选条件选项
			loadFilterOptions() {
				uni.request({
					url: this.baseURL + '/api/assets/housing-query/',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							// 楼宇选项
							this.buildingOptions = res.data.data.filters.buildings
							this.buildingNames = ['全部', ...this.buildingOptions.map(item => item.name)]
							
							// 楼层选项
							this.floorOptions = res.data.data.filters.floors
							this.floorNames = ['全部', ...this.floorOptions.map(item => item.actual_label)]
							
							// 单元类型选项
							this.unitTypes = ['全部', ...res.data.data.filters.unit_types]
						}
					},
					fail: (err) => {
						console.error('加载筛选选项失败', err)
						uni.hideLoading() // 确保加载框被关闭
						uni.showToast({
							title: '加载筛选选项失败，请检查网络连接',
							icon: 'none',
							duration: 2000
						})
					},
					complete: () => {
						// 无论成功失败都确保加载框关闭
						uni.hideLoading()
					}
				})
			},
			
			// 楼宇选择变化
			onBuildingChange(e) {
				this.buildingIndex = e.detail.value
			},
			
			// 楼层选择变化
			onFloorChange(e) {
				this.floorIndex = e.detail.value
			},
			
			// 单元类型选择变化
			onUnitTypeChange(e) {
				this.unitTypeIndex = e.detail.value
			},
			
			// 重置筛选条件
			resetFilters() {
				this.buildingIndex = 0
				this.floorIndex = 0
				this.unitTypeIndex = 0
				this.minArea = ''
				this.maxArea = ''
				this.minPrice = ''
				this.maxPrice = ''
			},
			
			// 查询房源
			searchHousing() {
				// 重置分页
				this.page = 1
				this.housingList = []
				
				// 构建查询参数
				const params = this.buildQueryParams()
				
				// 发起请求
				this.fetchHousingList(params)
			},
			
			// 构建查询参数
			buildQueryParams() {
				const params = {
					page: this.page,
					page_size: this.pageSize
				}
				
				// 楼宇
				if (this.buildingIndex > 0) {
					params.building_id = this.buildingOptions[this.buildingIndex - 1].building_id
				}
				
				// 楼层
				if (this.floorIndex > 0) {
					params.floor_id = this.floorOptions[this.floorIndex - 1].floor_id
				}
				
				// 单元类型
				if (this.unitTypeIndex > 0) {
					params.unit_type = this.unitTypes[this.unitTypeIndex]
				}
				
				// 面积范围
				if (this.minArea) {
					params.min_area = this.minArea
				}
				if (this.maxArea) {
					params.max_area = this.maxArea
				}
				
				// 价格范围
				if (this.minPrice) {
					params.min_price = this.minPrice
				}
				if (this.maxPrice) {
					params.max_price = this.maxPrice
				}
				
				return params
			},
			
			// 获取房源列表数据
			fetchHousingList(params) {
				uni.showLoading({
					title: '加载中'
				})
				
				// 构建URL查询参数
				const queryString = Object.keys(params)
					.map(key => `${key}=${encodeURIComponent(params[key])}`)
					.join('&')
				
				uni.request({
					url: `${this.baseURL}/api/assets/housing-query/?${queryString}`,
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code === 200) {
							if (this.page === 1) {
								this.housingList = res.data.data.list
							} else {
								this.housingList = [...this.housingList, ...res.data.data.list]
							}
							
							this.total = res.data.data.total
							this.hasMoreData = this.housingList.length < this.total
						} else {
							uni.showToast({
								title: res.data.message || '获取房源列表失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('获取房源列表失败', err)
						uni.showToast({
							title: '获取房源列表失败，请检查网络连接',
							icon: 'none',
							duration: 2000
						})
					},
					complete: () => {
						// 无论成功失败都确保加载框关闭
						uni.hideLoading()
					}
				})
			},
			
			// 加载更多
			loadMore() {
				if (this.hasMoreData) {
					this.page++
					const params = this.buildQueryParams()
					this.fetchHousingList(params)
				}
			},
			
			// 查看房源详情
			viewHousingDetail(item) {
				// 将房源数据存储到本地
				uni.setStorageSync('currentHousingDetail', item)
				
				// 跳转到详情页
				uni.navigateTo({
					url: '/pages/services/housing/detail?id=' + item.unit_id
				})
			},
			
			// 申请租赁
			applyForRent(item) {
				// 检查登录状态
				if (!this.userInfo) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
					return
				}
				
				// 将房源数据存储到本地
				uni.setStorageSync('currentHousingDetail', item)
				
				// 跳转到申请页
				uni.navigateTo({
					url: '/pages/services/housing/apply?id=' + item.unit_id
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 30rpx;
	}
	
	.header {
		background-color: #FFFFFF;
		padding: 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.filter-section {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.filter-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333333;
	}
	
	.filter-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.filter-label {
		width: 120rpx;
		font-size: 28rpx;
		color: #666666;
	}
	
	.picker-value {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		background-color: #F8F8F8;
		border-radius: 6rpx;
		font-size: 28rpx;
		color: #333333;
	}
	
	.range-input {
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.range-input input {
		width: 150rpx;
		height: 60rpx;
		background-color: #F8F8F8;
		border-radius: 6rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.range-input text {
		margin: 0 10rpx;
		color: #999999;
	}
	
	.filter-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.reset-btn, .search-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
	
	.reset-btn {
		background-color: #F8F8F8;
		color: #666666;
	}
	
	.search-btn {
		background-color: #007AFF;
		color: #FFFFFF;
	}
	
	.housing-list {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.list-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.list-count {
		font-size: 24rpx;
		color: #999999;
	}
	
	.housing-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}
	
	.housing-info {
		flex: 1;
	}
	
	.housing-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}
	
	.housing-tags {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.tag {
		font-size: 22rpx;
		padding: 4rpx 12rpx;
		background-color: #F0F7FF;
		color: #007AFF;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}
	
	.status-tag {
		background-color: #E6F7F0;
		color: #07C160;
	}
	
	.housing-detail {
		margin-top: 10rpx;
	}
	
	.detail-item {
		display: flex;
		font-size: 26rpx;
		margin-bottom: 6rpx;
	}
	
	.label {
		color: #999999;
		width: 120rpx;
	}
	
	.value {
		color: #333333;
		flex: 1;
	}
	
	.price {
		color: #FF5151;
		font-weight: bold;
	}
	
	.housing-action {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}
	
	.apply-btn {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 30rpx;
		text-align: center;
	}
	
	.empty-state {
		padding: 100rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}
	
	.load-more, .no-more {
		text-align: center;
		padding: 30rpx 0;
		font-size: 26rpx;
		color: #999999;
	}
	
	.load-more {
		color: #007AFF;
	}
</style> 